<template>
  <div class="warning-trend" ref="container"></div>
</template>
<script setup lang="ts">
import {onMounted, watch} from "vue";
import {map, max, min} from "lodash";
import useEcharts from "../../utils/useCharts";

const {container, echarts, setOption} = useEcharts();

const props = defineProps({
  tableData: {
    type: Array,
    default: () => [],
  },
});
const generateOptions = () => {
  // const minValue = map(sources, (source) => min(source));
  // const maxValue = map(sources, (source) => max(source));

  return {
    tooltip: {
      trigger: "axis",
      backgroundColor: "#2f2f48",
      borderColor: "#2f2f48",
      textStyle: {
        color: "#fff",
      },
    },
    grid: {
      left: "5%",
      right: "5%",
      bottom: "3%",
      top: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#9292c1",
        margin: 20,
      },
      data: props.tableData.map(e => e.name),
    },
    yAxis: {
      type: "value",
      show: true,
    },
    series: [
      {
        name: "价格",
        type: "line",
        symbol: "none",
        smooth: true,
        animationDuration: 3000,
        animationEasing: "cubicInOut",
        // itemStyle: {
        //   color: "#de38fb",
        // },
        // areaStyle: {
        //   normal: {
        //     color: new echarts.graphic.LinearGradient(
        //         0,
        //         0,
        //         0,
        //         1,
        //         [
        //           {offset: 0, color: "#de38fb"},
        //           {offset: 1, color: "#6732f3"},
        //         ],
        //         false
        //     ),
        //   },
        // },
        data: props.tableData.map(e => e.count),
      },
    ],
  };
};
watch(
    () => props.tableData,
    () => {
      const options = generateOptions();
      setOption(options);
    },
    {
      immediate: true,
    }
)
// onMounted(() => {
//   const sources = [
//     [1645, 1549, 1933, 1063, 1436, 1847, 1263],
//     [1464, 1485, 1405, 1852, 1091, 1659, 1923],
//   ];
//   // console.log('sources', sources)
//   const options = generateOptions(sources);
//   setOption(options);
// });
</script>
<style lang="scss" scoped>
.warning-trend {
  width: 100%;
  height: 300px;
}
</style>